<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Widgets in Ruby GTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK, Widgets, Ruby, programming, Linux">
<meta name="description" content="In this part of the Ruby GTK programming tutorial, we 
present some widgets.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Widgets</h1>

<p>
In this part of the Ruby GTK programming tutorial, we will introduce some widgets.
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
Widgets are basic building blocks of a GUI application. Over the years, several widgets became a 
standard in all toolkits on all OS platforms. For example a button, a check box or a scroll bar. 
The GTK toolkit's philosophy is to keep the number of widgets at a minimum level. 
More specialized widgets are created as custom GTK widgets.  
</p>

<h2>CheckButton</h2>

<p>
<code>CheckButton</code> is a widget, that has two states. On and Off. 
The On state is visualised by a check mark. It is used to denote some boolean
property.
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This program toggles the title of the
# window with the CheckButton widget
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: April 2009

require 'gtk2'

class RubyApp &lt; Gtk::Window
    def initialize
        super
    
        set_title "CheckButton"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end
        
        init_ui

        set_default_size 250, 200
        set_window_position Gtk::Window::POS_CENTER
        show_all
    end
    
    
    def init_ui
    
        fixed = Gtk::Fixed.new
        add fixed
        
        cb = Gtk::CheckButton.new "Show title"
        cb.set_active true
        cb.set_can_focus false
        cb.signal_connect("clicked") do |w|
            on_clicked(w)
        end

        fixed.put cb, 50, 50    
    
    end
    
    def on_clicked sender

        if sender.active?
            self.set_title "Check Button"
        else
           self.set_title ""
        end
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main
</pre>

<p>
We will display a title in the titlebar of the window,
depending on the state of the <code>CheckButton</code>. 
</p>

<pre class="explanation">
cb = Gtk::CheckButton.new "Show title"
</pre>

<p>
<code>CheckButton</code> widget is created. 
</p>

<pre class="explanation">
cb.set_active true
</pre>

<p>
The title is visible by default, so we check the check button by default. 
</p>


<pre class="explanation">
if sender.active?
    self.set_title "Check Button"
else
    self.set_title ""
end
</pre>

<p>
We show the title, if the button is checked.
</p>

<img src="/img/gui/rubygtk/checkbutton.png" alt="CheckButton">
<div class="figure">Figure: CheckButton</div>


<h2>Label</h2>

<p>
The <code>Label</code> widget shows text. 
</p>


<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This example demonstrates the Label widget
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require 'gtk2'

$lyrics = %{Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
You say why did you do it with him today?
and sniff me out like I was Tanqueray

cause you're my fella, my guy
hand me your stella and fly
by the time I'm out the door
you tear men down like Roger Moore

I cheated myself
like I knew I would
I told ya, I was trouble
you know that I'm no good}


class RubyApp &lt; Gtk::Window

    def initialize
        super
    
        set_title  "You know I'm no Good"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end
        
        init_ui

        set_default_size 250, 200
        set_window_position Gtk::Window::POS_CENTER
        
        show_all
    end
    
    def init_ui
    
        set_border_width 10
        label = Gtk::Label.new $lyrics
        add label    
    
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main

</pre>

<p>
The code example shows some lyrics on the window. 
</p>

<pre class="explanation">
 $lyrics = %{Meet you downstairs in the bar and heard
 your rolled up sleeves and your skull t-shirt
 ...
</pre>

<p>
We create a multi line text.
</p>

<pre class="explanation">
set_border_width 10
</pre>

<p>
The <code>Label</code> is surrounded by some empty space. 
</p>

<pre class="explanation">
label = Gtk::Label.new $lyrics
add label 
</pre>

<p>
The <code>Label</code> widget is created and added to the window. 
</p>

<img src="/img/gui/rubygtk/label.png" alt="Label Widget">
<div class="figure">Figure: Label Widget</div>


<h2>Entry</h2>

<p>
The <code>Entry</code> is a single line text entry field. This widget 
is used to enter textual data. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This example demonstrates the Entry widget
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require 'gtk2'


class RubyApp &lt; Gtk::Window

    def initialize
        super
    
        set_title "Entry"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end
        
        init_ui

        set_default_size 250, 200
        set_window_position Gtk::Window::POS_CENTER
        
        show_all
    end
    
    def init_ui
    
        fixed = Gtk::Fixed.new

        label = Gtk::Label.new "..."
        fixed.put label, 60, 40

        entry = Gtk::Entry.new
        fixed.put entry, 60, 100

        entry.signal_connect "key-release-event" do |w, e|
            on_key_release(w, e, label)
        end

        add(fixed)
    end  
    
    def on_key_release sender, event, label
        label.set_text sender.text
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main
</pre>

<p>
This example shows an entry widget and a label. The text that we key in the 
entry is displayed immediately in the label widget. 
</p>

<pre class="explanation">
entry = Gtk::Entry.new
</pre>

<p>
<code>Entry</code> widget is created. 
</p>

<pre class="explanation">
entry.signal_connect "key-release-event" do |w, e|
    on_key_release(w, e, label)
end
</pre>

<p>
We plug the <code>on_key_release</code> method to the
<code>key-release-event</code> of the <code>Entry</code> widget.
</p>

<pre class="explanation">
def on_key_release sender, event, label
    label.set_text sender.text
end
</pre>

<p>
We get the text from the <code>Entry</code> widget and
set it to the label. 
</p>

<img src="/img/gui/rubygtk/entry.png" alt="Entry Widget">
<div class="figure">Figure: Entry Widget</div>


<h2>Image</h2>

<p>
The <code>Image</code> widget shows an image.
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This example demonstrates the Image widget
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require 'gtk2'


class RubyApp < Gtk::Window

    def initialize
        super
    
        set_title "Red Rock"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end
        
        init_ui

        set_default_size 250, 200
        set_window_position Gtk::Window::POS_CENTER
        
        show_all
    end
    
    def init_ui
    
        set_border_width 2
        
        begin
            image = Gtk::Image.new "redrock.png"
        rescue
            puts "cannot load image"
            exit
        end
        
        add image
    end
    
end

Gtk.init
    window = RubyApp.new
Gtk.main
</pre>

<p>
In our example, we show an image on the window. 
</p>

<pre class="explanation">
set_border_width 2
</pre>

<p>
We put some empty border around the image. 
</p>

<pre class="explanation">
begin
    image = Gtk::Image.new "redrock.png"
rescue
    puts "cannot load image"
    exit
end
</pre>

<p>
The <code>Image</code> widget is created. IO operations are error prone, so
we handle the possible exceptions.
</p>


<pre class="explanation">
add image
</pre>

<p>
Widget is added to the container.
</p>

<img src="/img/gui/rubygtk/image.jpg" alt="Image widget">
<div class="figure">Figure: Image widget</div>


<h2>ComboBox</h2>

<p>
<code>ComboBox</code> is a widget that allows the user to 
choose from a list of options.
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby GTK tutorial
#
# This example demonstrates the ComboBox widget
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009

require 'gtk2'


class RubyApp &lt; Gtk::Window

    def initialize
        super
    
        set_title "ComboBox"
        signal_connect "destroy" do 
            Gtk.main_quit 
        end
        
        init_ui

        set_default_size 250, 200
        set_window_position Gtk::Window::POS_CENTER
        
        show_all
    end
    
    def init_ui

        fixed = Gtk::Fixed.new
        label = Gtk::Label.new '-'
        fixed.put label, 50, 140

        cb = Gtk::ComboBox.new
        cb.signal_connect "changed" do |w, e|
            on_changed(w, e, label)
        end

        cb.append_text 'Ubuntu'
        cb.append_text 'Mandriva'
        cb.append_text 'Redhat'
        cb.append_text 'Gento'
        cb.append_text 'Mint' 

        fixed.put cb, 50, 30

        add fixed

    end

    def on_changed sender, event, label
        label.set_label sender.active_text
    end
end

Gtk.init
    window = RubyApp.new
Gtk.main
</pre>

<p>
The example shows a combo box and a label. The combo box has a list of five options. 
These are the names of Linux Distros. The label widget shows the selected option from the combo box. 
</p>

<pre class="explanation">
cb = Gtk::ComboBox.new
</pre>

<p>
The <code>ComboBox</code> widget is created. 
</p>

<pre class="explanation">
cb.append_text 'Ubuntu'
cb.append_text 'Mandriva'
cb.append_text 'Redhat'
cb.append_text 'Gento'
cb.append_text 'Mint' 
</pre>

<p>
It is filled with data. 
</p>

<pre class="explanation">
def on_changed sender, event, label
    label.set_label sender.active_text
end
</pre>

<p>
Inside the <code>on_changed</code> method, we get the selected
text out of the combo box and set it to the label. 
</p>

<img src="/img/gui/rubygtk/combobox.png" alt="ComboBox">
<div class="figure">Figure: ComboBox</div>


<p>
In this chapter of the Ruby GTK tutorial, we showed some basic widgets.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified June 26, 2009  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

